{% extends "youpu_base.html" %}

{% load i18n %}

{% block head_title %}注册{% endblock %}


{% block content %}

    {#  错误信息提示区域  #}
    <div id="tips" class="alert alert-warning" style="display: none">
        <span id="tip_content"></span>
    </div>

    <div class="row">
        <div class="col-md-6 offset-md-3">

            <h1>注册</h1>

            <p>已经有一个账号？ 请<a href="{% url 'youpu:users_login' %}">登录</a>.</p>

            <form class="signup" onsubmit="return check()" id="signup_form" method="post"
                  action="{% url 'youpu:users_register' %}">
                {% csrf_token %}

                <div id="div_id_email" class="form-group">
                    <label for="id_email" class="col-form-label  requiredField">
                        E-mail<span class="asteriskField">*</span> </label>
                    <div class="form-inline">

                        <input type="text" id="email" name="email" placeholder="E-mail地址"
                               class="textinput textInput form-control" required id="id_email">
                        <button type="submit" id="sendVerifyCode" class="btn btn-info"
                                style="margin-left: 10px;margin-right: 10px;">发送验证码
                        </button>
                        <input type="text" class="form-control" name="code" id="code" placeholder="验证码">
                    </div>
                </div>

                <div id="div_id_username" class="form-group"><label for="id_username"
                                                                    class="col-form-label  requiredField">
                    用户名<span class="asteriskField">*</span> </label>
                    <div class=""><input type="text" name="username" placeholder="用户名" autofocus="autofocus"
                                         minlength="1" maxlength="150" class="textinput textInput form-control" required
                                         id="id_username"></div>
                </div>
                <div id="div_id_password1" class="form-group"><label for="id_password1"
                                                                     class="col-form-label  requiredField">
                    密码<span class="asteriskField">*</span> </label>
                    <div class=""><input id="password1_input" type="password" name="password" placeholder="密码"
                                         class="textinput textInput form-control" required id="id_password1"></div>
                </div>
                <div id="div_id_password2" class="form-group"><label for="id_password2"
                                                                     class="col-form-label  requiredField">
                    密码(重复)<span class="asteriskField">*</span> </label>
                    <div class=""><input id="password2_input" type="password" name="password2" placeholder="密码(重复)"
                                         class="textinput textInput form-control" required id="id_password2"></div>
                </div>


                {#                {% for field in form %}#}
                {#                    {% if field.errors %}#}
                {#                        <div class="form-group has-error">#}
                {#                    {% else %}#}
                {#                        <div class="form-group">#}
                {#                    {% endif %}#}
                {#                {{ field.label_tag }}#}
                {#                {{ field }}#}
                {#                {% for error in field.errors %}#}
                {#                    <span class="label label-danger">{{ error }}</span>#}
                {#                {% endfor %}#}
                {#                </div>#}
                {#                {% endfor %}#}


                <button class=" btn btn-primary" type="submit">注册 &raquo;</button>
            </form>


        </div>
    </div>

{% endblock %}

{% block js %}

    <script type="text/javascript">
        function check() {
            if (checkEmail() && checkPassword() && checkPasswordForm()) {
                //如果所有的都可以通过检验，则向后台发起请求
                {#$("#signup_form").submit();#}
                return true;
            } else
                return false;
        }

        function checkPasswordForm() {
            var password = $("#password").val();
            var reg_password = /^\w{8,20}$/;
            var flag = reg_password.test(password);
            if (!flag) {
                showFailMessage("密码长度为8-20位!");
            }
            return flag;
        }

        function checkEmail() {
            var email = $("#email").val();
            var reg_email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            var flag = reg_email.test(email);

            if (!flag) {
                //错误消息显示
                showFailMessage("邮箱格式错误!");
            }
            return flag;
        }

        function showFailMessage(message) {
            document.getElementById("tips").style.display = "block";
            document.getElementById("tip_content").innerText = message;
            {# 让提示框只显示2秒钟 #}
            window.setTimeout(function () {
                document.getElementById("tip_content").innerText = "";
                document.getElementById("tips").style.display = "none";
            }, 2000)
        }

        function checkPassword() {
            var password = document.getElementById("password1_input").value;
            var repassword = document.getElementById("password2_input").value;
            if (password !== repassword) {
                showFailMessage("两次密码输入不一致");
                return false;//验证不通过，拒绝提交
            }
            return true;
        }

        //给发送验证码的按钮绑定单击事件
        $("#sendVerifyCode").click(function () {
            if (checkEmail()) {
                {#若邮箱格式正确，则向后台发起请求，进行邮箱发送#}
                $.ajax({
                    url: "{% url "youpu:users_get_verify_code" %}",
                    type: "post",
                    data: "email=" + $("#email").val(),
                    success: function (result) {
                        data = JSON.parse(result);
                        if (data["code"] != 0) {
                            showFailMessage("该邮箱已被占用，请更换邮箱！");
                        }
                    }
                });
                showFailMessage("邮箱已发送，请注意查收！");
            }
            return false;
        });
    </script>
{% endblock js %}

